<template>
    <el-container class="queryEditContainer">
        <el-header>
            <h1>{{queryId != undefined ? '编辑查询':'新建查询'}}</h1>
        </el-header>

        <el-main>

            <el-form label-width="150px" label-position="left">

                <el-form-item label="请选择数据源">
                    <el-select v-model="query.queryDatasource" placeholder="请选择">
                        <el-option
                                v-for="item in datasource"
                                :label="item.datasourceName"
                                :key="item.datasourceId"
                                :value="item.datasourceId"
                        ></el-option>
                    </el-select>
                </el-form-item>


                <el-form-item label="查询名称">
                    <el-input v-model="query.queryName"></el-input>
                </el-form-item>

                <el-form-item label="查询方式">

                    <el-radio v-model="query.queryType" label="SQL">SQL
                    </el-radio>
                    <el-radio v-model="query.queryType" label="URL">URL</el-radio>
                </el-form-item>

                <el-form-item label="请求方法" v-if="query.queryType == 'URL'">
                    <el-select v-model="query.queryMethod">
                        <el-option label="GET" value="GET">
                        </el-option>
                        <el-option label="POST" value="POST">
                        </el-option>

                    </el-select>
                </el-form-item>

                <el-form-item :label="query.queryLabel">
                    <el-input type="textarea" v-model="query.querySql"></el-input>
                </el-form-item>
            </el-form>


            <QueryParamsEdit ref="queryParamsEdit" :datasourceId="query.queryDatasource"></QueryParamsEdit>
            <p></p>
            <QueryResultEdit ref="queryResultEdit"></QueryResultEdit>
            <p></p>
            <el-button type="primary" @click="validate">保存</el-button>
        </el-main>
    </el-container>
</template>

<script>
    import QueryParamsEdit from "./QueryParamsEdit.vue";
    import QueryResultEdit from "./QueryResultEdit.vue";

    export default {

        props: ['queryId'],

        data() {
            return {

                query:{

                    querParamsConfig: [],
                    queryResultConfig: [],
                    queryDatasource: '',
                    querySql: '',
                    queryUrl: '',
                    queryName: '',
                    queryLabel: '查询sql',
                    queryType: 'SQL',
                    queryMethod: 'GET',
                    queryId: ''

                },

                datasource: []

            };
        },
        mounted() {

            this.loadDataSource();

            this.loadQueryById();

        },
        methods: {
            validate() {
                if (this.query.queryDatasource == "") {
                    this.$notify.error({
                        title: "失败",
                        message: "请选择一个数据源"
                    });
                    return;
                }

                if (this.query.queryName == "") {
                    this.$notify.error({
                        title: "失败",
                        message: "请输入查询名称"
                    });
                    return;
                }

                if (this.query.sql == "") {
                    this.$notify.error({
                        title: "失败",
                        message: "请输入sql"
                    });
                    return;
                }


                //获取参数和结果集配置
                this.query.querParamsConfig = this.$refs.queryParamsEdit.getParamsConfig();

                this.query.queryResultConfig = this.$refs.queryResultEdit.getResultConfig();

                this.query.queryId = this.queryId;


                this.$axios
                    .post("/query/addQuery", this.query)
                    .then(d => {
                        if (d.data.status) {
                            this.$notify({
                                title: "成功",
                                message: "保存成功",
                                type: "success"
                            });
                            this.$router.back(-1);
                        } else {
                            this.$notify.error({
                                title: "失败",
                                message: d.data.message
                            });
                        }
                    })
                    .catch(e => {
                        this.$notify.error({
                            title: "失败",
                            message: "保存失败"
                        });
                        return;
                    });
            },

            loadQueryById(){

                if(this.queryId){


                    this.$axios
                        .get("/query/getQuery?queryId=" + this.queryId)
                        .then(d => {

                            this.query = d.data;

                            this.$refs.queryParamsEdit.setParamsConfig(this.query.querParamsConfig);

                            this.$refs.queryResultEdit.setResultConfig(this.query.queryResultConfig);

                        })
                        .catch(e => {
                            this.$notify.error({
                                title: "错误",
                                message: "加载查询信息失败"
                            });
                        });


                }
            },

            loadDataSource() {
                this.$axios
                    .get("/datasource/listAll")
                    .then(d => {
                        this.datasource = d.data;

                        if (this.datasource.length > 0) {
                            this.query.queryDatasource = this.datasource[0].datasourceId;
                        }
                    })
                    .catch(e => {
                        this.$notify.error({
                            title: "失败",
                            message: "数据源加载失败"
                        });
                    });
            }
        },

        components: {
            QueryParamsEdit,
            QueryResultEdit
        },

        watch: {

            queryType(nv, ov) {
                if (this.query.queryType == "SQL") {
                    this.query.queryLabel = "查询sql";
                } else {
                    this.query.queryLabel = "查询url";
                }
            }
        }
    };
</script>

<style>
    .queryEditContainer {
        height: 100%;

    }
</style>
